<!DOCTYPE html>
<html lang="en">
<head>
<title>Component library</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,500,700" type="text/css" />
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


<style type="text/css">
body {
	font-family: 'Ubuntu', sans-serif;
}

h1, .jumbotron h1 {
	font-size: 30px;
}

h2 {
	font-size: 22px;
}

h3 {
	font-size: 16px;
}

.panel {
	border-radius: 2px;
}

.container .jumbotron {
	padding: 20px;
	border-radius: 2px;
}

.jumbotron p {
	font-size: inherit;
}

.label {
	font-size: 0.9em;
	font-weight: normal;
	border-radius: 2px;
}

.panel-heading {
	background-image: none !important;
}
</style>
</head>
<body>
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script
		src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<div class="container">
		<div class="panel panel-default">
			<div class="panel-body">
				<div class="jumbotron">
					<h1>
						<img src="https://datacleaner.org/resources/dc-logo-100.png" alt="" />
						Component library
					</h1>
				</div>
			</div>
		</div>

		<#list superCategories as superCategory>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>
					<a data-toggle="collapse" href="#superCategoryPanel_${superCategory.name}" aria-controls="superCategoryPanel_${superCategory.name}">${superCategory.name}</a>
				</h2>
			</div>
			<div class="panel-body collapse in" id="superCategoryPanel_${superCategory.name}"
				aria-expanded="true">
				
				<#if superCategory.categories?has_content>
					<#list superCategory.categories as category>
							<h3>${category.name}</h3>
							
							<ul class="list-group">
							<#list category.components as component>
								<li class="list-group-item componentItem">
									<a href="${component.href}">
										<img src="${component.iconSrc(component.iconSizeLarge)}" width="16" height="16" alt="" />
										<span>${component.name}</span>
									</a>
								</li>
							</#list>
							</ul>
					</#list>
				</#if>
				<#if superCategory.components?has_content>
					<ul class="list-group">
					<#list superCategory.components as component>
						<li class="list-group-item componentItem">
							<a href="${component.href}">
								<img src="${component.iconSrc(component.iconSizeLarge)}" width="16" height="16" alt="" />
								<span>${component.name}</span>
							</a>
						</li>
					</#list>
					</ul>
				</#if>
			</div>
			</div>
		</#list>
	</div>
</body>
</html>